<template>
	<view class="container">
		<view style="display: flex;align-items: center;margin-left: 30rpx;margin-bottom: 30rpx;">
			<uni-view style="margin-right:20rpx ;">京栖无限企福平台</uni-view>
			<uni-view class="search">
				<uni-view
					style="width: 400rpx;height: 54rpx ;border-radius: 38rpx;text-align: center;line-height: 54rpx;">
					<view class="u-demo-block__content">
						<view class="u-page__tag-item">
							<u-search v-model="value1" :show-action="false" disabled="disabled" @change="change">
							</u-search>
						</view>
					</view>
				</uni-view>
			</uni-view>


		</view>
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item ,index) in info" :key="index"
					style="display: flex;justify-content: center;align-items: center;">
					<view class="swiper-item">
						<image :src="item.content" style="margin: 0 auto;width:720upx;"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 商品导航 -->
		<uni-card :is-shadow="false" style="border-radius: 18rpx;">
			<uni-grid :column="5" :highlight="true" :showBorder="false">
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<image :src="item.url" style="width: 50rpx;height: 50rpx;" @click="detail"></image>
						<text class="text">{{ item.text }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-card>
		<!-- 滚动文字 -->
		<uni-notice-bar show-icon scrollable background-color="#fff" show-get-more :speed="60"
			text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
		<!-- 图片 -->
		<!-- 	<view class="imgs-1">
			<image src="../../static/index-img/sy1.jpeg" style="width: 100%;height: 225rpx;"></image>
		</view> -->
		<!-- 商品1 -->
		<view class="commodity" style="display: flex;" v-for="(item ,index) in test" :key="index">
			<uni-card :is-shadow="false" :border="false" style="padding: 0;margin: 0;">
				<image :src="item.url" style="width: 100%;height: 225rpx;"></image>
			</uni-card>
			<uni-card :is-shadow="false" :border="false" style="padding: 0;margin: 0;">
				<text class="uni-body">这是一个基础卡片示例，内容较少，此示例展示了一个。</text>
				<!-- 进度条 -->
				<progress percent="30" activeColor="#FFA07A" active stroke-width="4" />
				<uni-swipe-action style="display: flex;align-items: center;">
					<span style="color: #FF0000;font-size:36rpx;margin-right: 5rpx;">￥199 </span>
					<span
						style="color: #999;font-size: 6rpx;margin-top: 10rpx;text-decoration:line-through;margin-right: 10rpx;">￥399</span>
					<button type="warn" size="mini" style="border-radius: 45rpx;">已结束</button>
				</uni-swipe-action>
			</uni-card>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				info: [{
					content: '../../static/index-img/sy1.jpeg '
				}, {
					content: '../../static/index-img/sy2.jpeg'
				}],
				current: 0,
				mode: 'dot',
				dynamicList: [],
				list1: [],
				params: {
					pagenum: 1,
					pagesize: 20,
					current: ""
				},
				goodsList: [],
				test: [{
						url: '../../static/index-img/zsp01.jpg'
					},
					{
						url: '../../static/index-img/zsp02.jpg',
					},
					{
						url: '../../static/index-img/zsp03.jpg',
					},
					{
						url: '../../static/index-img/zsp04.jpg',
					},
					{
						url: '../../static/index-img/zsp05.png',
					}
				],
				list: [{
						url: '../../static/index-img/sp1.png',
						text: '年货',
						badge: '0',
						type: "primary"
					},
					{
						url: '../../static/index-img/sp2.jpeg',
						text: '图书',
						badge: '1',
						type: "success"
					},
					{
						url: '../../static/index-img/sp3.jpeg',
						text: '休闲零食',
						badge: '99',
						type: "warning"
					},
					{
						url: '../../static/index-img/sp4.jpeg',
						text: '食用油',
						badge: '2',
						type: "error",
					},
					{
						url: '../../static/index-img/sp5.jpeg',
						text: '榨汁机'
					},
					{
						url: '../../static/index-img/sp6.jpeg',
						text: '吃鸡装备'
					},
					{
						url: '../../static/index-img/sp7.jpeg',
						text: '亲子玩具'
					},
					{
						url: '../../static/index-img/sp8.jpeg',
						text: '家纺'
					},
					{
						url: '../../static/index-img/sp9.jpeg',
						text: '实木家具'
					},
					{
						url: '../../static/index-img/sp10.jpeg',
						text: '美妆'
					}
				]
			}
		},
		
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			detail() {
				uni.navigateTo({
					url: "../Productlist/Productlist"
				})
			},
			changeCate(cname) {
				this.current = cname
			},
			// 获取分类
			getCateList() {
				uni.$u.http.request({
					url: "goods/category/all",
			
				}).then(res => {
					this.list1 = res.data;
					// this.$forceUpdate();
					this.params.current = this.list1[0].id;
					this.getGoodsList();
				})
			},
			// 获取商品列表
			getGoodsList() {
				uni.$u.http.request({
					url: "goods/list/v2",
					data: this.params,
					method: "POST"
				}).then(res => {
					this.goodsList = res.data.result
					console.log(this.goodsList)
				})
			}
		},
		onShow() {
			this.getCateList();
		}
	}
</script>

<style>
	<style lang="scss">.image {
		width: 25px;
		height: 25px;
	}

	.imgs-1 {
		background-color: #BBFFFF;
		border-radius: 38rpx;
		margin: 25rpx 15rpx;

	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>
</style>
